<!--
 * @Author: LiZn
 * @Date: 2021-08-20 01:33:51
 * @LastEditTime: 2021-08-22 09:27:43
 * @LastEditors: LiZn
 * @Description: file content
 * @FilePath: \todaynews\src\components\bottomTab.vue
-->
<template>
  <div id="routestyle">
    <router-link class="astyle" to="/">
      <svg-icon :styleProps="$route.path=='/index'?propstyle:''" iconClass="index"></svg-icon>
      <span>首页</span>
    </router-link>
    <router-link class="astyle" to="/xigua">
      <svg-icon :styleProps="$route.path=='/xigua'?propstyle:''" iconClass="play"></svg-icon>
      <span>西瓜视频</span>
    </router-link>
    <router-link class="astyle" to="/videos">
      <svg-icon :styleProps="$route.path=='/videos'?propstyle:''" iconClass='videos'></svg-icon>
      <span>放映厅</span>
    </router-link>
    <router-link class="astyle" to="/my">
      <svg-icon :styleProps="$route.path=='/my'?propstyle:''" iconClass="my"></svg-icon>
      <span>我的</span>
    </router-link>
  </div>
</template>

<script>

  export default {
    data(){
      return {
        propstyle:'filter: drop-shadow(red 0 100px);transform: translateY(-100px);'
      }
    },
    mounted(){
    },
    methods:{

    }
  }

</script>
<style scoped>
  #routestyle{
    width:100%;
    height:1rem;
    position:fixed;
    bottom:0;
    display:flex;
    background:rgba(247, 244, 244, 0.966);
    overflow:hidden
  }
  .astyle{
    display:flex;
    flex-direction: column;
    width:25%;
    height:1rem;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
</style>